<template>
  <div class="search">
    <f-form ref="form" :action="api.cmsContent" :form-key="this.formItem.contentId" :file-ids="fileIds">
      <f-form-item label="标题" name="title" :required="true" :value="formItem.title"/>
      <f-form-item label="副标题" name="subTitle" :value="formItem.subTitle"/>
      <f-form-item label="来源" name="contentSource" :value="formItem.contentSource"/>
      <f-form-item label="来源地址" name="sourceUrl" :value="formItem.sourceUrl"/>
      <f-form-item label="封面图" type="upload" name="coverImage" :value="formItem.coverImage" value-type="json"
                   :file-max="3" @uploadSuccess="uploadSuccess"/>
      <f-form-item label="内容" name="content" type="editor" :value="formItem.content"/>
    </f-form>
  </div>
</template>

<script>
  export default {
    name: 'cmsForm',
    props: {},
    data() {
      return {
        isAdd: true,//是否是添加模式
        loaded: false,//是否加载轮播图组件
        fileIds: [],//上传文件ID
        formItem: this.getFormItem()
      }
    },
    methods: {
      getFormItem() {
        return {
          contentId: '',
          contentTypeId: 1,
          title: '',
          subTitle: '',
          coverImage: '',
          contentSource: '德人商旅',
          sourceUrl: '',
          contentState: 0,
          topOrder: 0,
          author: '',
          clickNum: 0,
          commentNum: 0,
          recommend: 0
        }
      },
      //表单赋值
      setData(data) {
        this.$refs.form.resetFields()
        this.formItem = this.getFormItem()
        this.isAdd = true
        if (data && data.contentId) {
          this.$refs.form.getDetails({ contentId: data.contentId }, (data) => {
            this.formItem = data
            this.loaded = true
          })
          this.isAdd = false
        } else {
          this.loaded = true
        }
      },
      //文件上传回调
      uploadSuccess(fileUrl, files, fileIds) {
        this.fileIds = fileIds
      },
      //提交表单
      handleSubmit(callback) {
        this.$refs.form.submit(this.formItem, callback)
      }
    },
    created() {

    },
    components: {}
  }
</script>

<style scoped lang="less" rel="stylesheet/less">

</style>
